<%--
  Created by IntelliJ IDEA.
  User: 21933
  Date: 2021/2/21
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>欢迎登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        body{
            background-image:url("../image/book.jpg");
            background-position: 0px -117px;
            margin-top: -20px;
            background-repeat: no-repeat;
            background-size: 100%;
            /*width: 1511px;*/
            /*height: 800px;*/
        }
        .login_pictures_txt {
            opacity: 0.7;
            margin-top: 201px;
            margin-left: 468px;
            font-family:华光淡古印_CNKI ;
            width: 200px;
            color: #f6f6f6;
            font-size: 25px;
            font-weight: normal;
            line-height: 40px;
            float: left;
        }
        #login{
            /*background: #9F9F9F;*/
            font-family:华光淡古印_CNKI ;
            opacity: 0.9;
            margin-right: 344px;
            margin-top: 285px;
            width: 500px;
            height: 300px;
            float: right;
        }
        #login input{
            width: 200px;
        }
        #dform{
            padding-top: 64px;
            padding-left: 58px;
        }
        label{
            color: #666666;
        }
        a{
            color: #eb7350;
        }
    </style>
</head>
<body>
<div id="maxdiv">
    <div class="login_pictures_txt">
        <p style="color: darkcyan; font-size: 50px;margin-bottom: 20px;font-family: 'Copperplate Gothic Bold'">有缘书店</p>
        <p class="login_pictures_title"><a href="${pageContext.request.contextPath}/page/register.jsp">我们在此等候已久</a></p>
        <p>没有什么能够阻挡</p>
        <p>你对自由的向往</p>
        <p>天马行空的生涯</p>
        <p>你的心了无牵挂</p>
        <p class="login_pictures_info">摘自《蓝莲花》</p>
    </div>

    <div id="login" >
        <div id="dform">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" id="username" name="username" lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="pword" name="password" lay-verify="pass" autocomplete="off" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="sub" class="layui-btn" lay-submit lay-filter="*">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['element','form','jquery','layer'],function () {
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        //点击登录
        $("#sub").click(function (){
            var username =  $("#username").val();
            var password =  $("#pword").val();
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/user/login',
                data:{
                    'username':username,
                    'password':password
                },
                dataType:'json',
                success:function (breakdata) {
                    //alert(breakdata);
                    var code=breakdata.code;
                    var msg=breakdata.msg;
                    if (code==300){
                        layer.alert(msg, {icon: 5});
                    }else{
                        //alert("sdfsdfs");
                        window.location.href = "${pageContext.request.contextPath}/page/zhuye.jsp";
                        //表示登录成功，本来应该要直接跳转到管理系统首页，现在需要先去查询当前用户对应的权限

                    }
                }
            })
            /*$.post(
                "../user/login",
                {username,password},
                function (bakedata){
                    if (bakedata.code==300){
                        layer.msg(bakedata.msg, {icon: 5});
                    }else{
                        //window.location.href = "homePage.jsp";
                        //表示登录成功，本来应该要直接跳转到管理系统首页，现在需要先去查询当前用户对应的权限
                        window.location.href = "menu/getAllMenuByRId";
                    }
                })*/
        })
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    })
</script>
</html>
